<template>
  <div class="user-info-table">
    <el-table :data="usersList" style="width: 100%">
      <el-table-column
        align="center"
        type="index"
        label="序号"
        width="50"
      ></el-table-column>
      <el-table-column
        prop="first_name"
        label="姓名"
        min-width="50"
      ></el-table-column>
      <el-table-column
        prop="job_no"
        label="工号"
        min-width="40"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        min-width="50"
      ></el-table-column>
      <el-table-column
        prop="department"
        label="部门"
        min-width="50"
      ></el-table-column>
    </el-table>
    <pagination
      class="pageWrapper"
      v-show="total > pageSize"
      :total="total"
      :layout="'total, prev, pager, next'"
      :page.sync="currentPage"
      :limit.sync="pageSize"
      @pagination="handlePage"
    />
  </div>
</template>
<script>
export default {
  name: "ReportUserInfoTable",
  props: {
    dataSource: {
      type: Array,
    },
  },
  components: {
    Pagination: () => import("@/components/Pagination")
  },
  watch: {
    dataSource: {
      handler(data = []) {
        this.total = data.length
        this.handlePage()
      },
      immediate: true
    }
  },
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: 5,
      usersList: []
    };
  },
  methods: {
    // 选择用户分页
    handlePage() {
      let size = this.pageSize,
        page = this.currentPage;
      const start = (page - 1) * size;
      const end = page * size;
      this.usersList = this.dataSource.slice(start, end);
    },
  }
};
</script>
<style lang="scss">
.weekly-report-statisc-dialog {
  .el-dialog__body {
    padding-top: 0;
  }
}
</style>